
import React from 'react';
import { ImageBackground, InteractionManager, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { removeCollect, saveCollect } from '../util/StorageUtil';

export class NameDetail extends React.Component {
    componentDidMount() {

        InteractionManager.runAfterInteractions(() => {
            this.params = this.props.route.params
            // console.warn(this.params?.item.jx)
            this.item = this.params?.item
            let isCollect = this.params?.item?.isCollect

            this.setState({ text: this.params?.item?.jx,isCollect,isShowSettings:false })
        });

    }
    toggleCollect = () => {
        if(this.state.isCollect){
            removeCollect(this.item.xm)
        }else{
            saveCollect(this.item)
        }
        this.setState({isCollect:!this.state.isCollect})
    }
    state = { text: null,isCollect:false,isShowSettings:false ,}
    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <ImageBackground style={{ flex: 1, opacity: 0.2, position: 'absolute', width: '100%', height: '100%' }} source={require('../../img/b2.jpg')}>

                </ImageBackground>
                {this.state.isShowSettings?
                <View>

                </View>:null}

                <TouchableOpacity
                    style={{ flexDirection:'row',justifyContent:'space-between', padding: 10,paddingHorizontal:14, position: 'relative', left: 0, top: 0, bottom: 0, alignItems: 'center' }}
                    >
                    <Ionicons onPress={() => {
                        this.props.navigation.goBack()
                    }} name="chevron-back-outline" size={28} color={'#262626'} />
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Ionicons onPress={()=>this.toggleCollect()} name={this.state.isCollect?"heart":"heart-outline"} size={24} color={'#262626'} />
                    {/* <Ionicons style={{paddingStart:12}} name="settings-outline" size={24} color={'#262626'} /> */}
                    </View>
                    {/* {this.state.isCollect?<Ionicons name="heart" size={28} color={'#262626'} />:<Ionicons name="heart-outline" size={28} color={'#262626'} />} */}
                </TouchableOpacity>
                <ScrollView style={{}}>
                    <Text selectable={true} style={{ padding: 14, fontSize: 26, lineHeight: 42, textAlign: 'justify' }}>{this.state.text}</Text>
                </ScrollView>
            </SafeAreaView>
        )
    }
}